<template>
    <div class="table-box">
        <ProTable ref="operTable" title="用户操作日志" row-key="operId" :columns="columns"
                  :request-api="operLogApi"></ProTable>
    </div>
</template>

<script lang="tsx" setup name="roleManage">
    import ProTable from "@/components/ProTable/index.vue";
    import {ColumnProps} from "@/components/ProTable/interface";
    import {operLogApi} from "@/api/modules/test/auth";
    import {CirclePlus, Delete, EditPen, Download, Upload, View, Refresh, Setting} from "@element-plus/icons-vue";
    import {ref} from "vue";
    import {useHandleData} from "@/hooks/useHandleData";

    // 表单配置项
    const columns: ColumnProps[] = [
        {type: "index", label: "序号", width: 150},
        {
            prop: "operName",
            label: "操作用户",
            align: "center",
        },
        {
            prop: "key",
            label: "关键字",
            isShow:false,
            search: {
                el: "input"
            }
        },
        {prop: "operUrl", label: "请求URI"},
        {prop: "title", label: "请求描述"},
        {prop: "operIp", label: "请求IP"},
        {prop: "operParam", label: "请求参数"},
        {prop: "jsonResult", label: "响应内容"},
        {
            prop: "operTime",
            label: "操作时间",
            render: scope => {
                const date = new Date(scope.row.operTime);
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, "0");
                const day = date.getDate().toString().padStart(2, "0");
                const hour = date.getHours().toString().padStart(2, "0");
                const minute = date.getMinutes().toString().padStart(2, "0");
                const second = date.getSeconds().toString().padStart(2, "0");
                const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
                return <p> {formattedDate}</p>;
            }
        },
        {
            prop: "status",
            label: "请求状态",
            render: scope => {
                // 渲染tag
                return (
                    <el-tag effect="dark" type={scope.row.status == 1 ? "" : "warning"}>
                        {scope.row.status == 1 ? "正常" : "异常"}
                    </el-tag>
                );
            }
        }
    ];

    // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
    const operTable = ref();

    const formattedDate = async (time: any) => {
        const date = new Date(time);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const day = date.getDate().toString().padStart(2, "0");
        const hour = date.getHours().toString().padStart(2, "0");
        const minute = date.getMinutes().toString().padStart(2, "0");
        const second = date.getSeconds().toString().padStart(2, "0");
        const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
        console.log(formattedDate);
        return formattedDate;
    };
</script>
